<div class="page-container grid grid-cols-1 lg:grid-cols-12 lg:gap-6 lg:mt-6">
  <div class="lg:col-span-3">
    <%= render 'spree/account/account_nav', current: 'newsletter' %>
  </div>
  <div class="lg:col-span-8 lg:col-start-5">
    <div class="flex flex-col gap-4 max-w-[26.5rem]">
      <div class="flex flex-col gap-1">
        <h3 class="font-medium uppercase text-base"><%= Spree.t('storefront.account.newsletter_settings') %></h3>
        <p class="text-base text-neutral-600">
          <%= Spree.t('storefront.newsletter_subscription.description') %>
        </p>
      </div>
      <%= render 'newsletter_settings' %>
    </div>
  </div>
</div>
